<template>
  <div class="backManage">
    <div class="top">
      <a-button type="primary" @click="showModal">创建项目</a-button>
    </div>

    <!-- 表格 -->
    <div class="atable">
      <a-table :columns="columns" :data-source="data">
        <span slot="action" slot-scope="text, record">
          <a style="color:#1890FF" @click="onEdit(text, record)">用户管理</a>
        </span>
      </a-table>
    </div>

    <!-- 分页 -->
    <div class="pagination flexBetween">
      <div>共{{total}} 条记录 第 {{current}} / {{Math.ceil((total/pageSize))}} 页</div>
      <div>
        <a-pagination
          :current="current"
          :page-size-options="pageSizeOptions"
          :total="total"
          show-size-changer
          :pinspector-size="pageSize"
          @showSizeChange="onShowSizeChange"
          @change="pageChange"
          show-quick-jumper
        >
          <template slot="buildOptionText" slot-scope="props">
            <span v-if="props.value !== '40'">{{ props.value }}条/页</span>
            <span v-if="props.value === '40'">全部</span>
          </template>
        </a-pagination>
      </div>
    </div>

    <!-- 对话框 -->
    <div class="amodla">
      <a-modal
        v-model="visible"
        :title="modalTitle"
        @ok="handleOk"
        :maskClosable="false"
        cancelText="取消"
        okText="确认"
      >
        <a-form-model
          ref="ruleForm"
          :model="form"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          v-if="visible"
        >
          <a-form-model-item ref="selectPro" label="选择项目" prop="selectPro">
            <a-select label-in-value :default-value="defaultValue" @change="handleChange">
              <!-- style="width: 120px" -->
              <a-select-option
                v-for="(item,index) in projectData "
                :key="index"
                :value="item.key"
              >{{item.label}}</a-select-option>
            </a-select>
          </a-form-model-item>

          <a-form-model-item ref="name" label="项目名称" prop="name">
            <a-input v-model="form.name" :maxLength="30" />
          </a-form-model-item>

          <a-form-model-item ref="proName" label="项目简称" prop="proName">
            <a-input v-model="form.proName" :maxLength="30" />
          </a-form-model-item>

          <a-form-model-item ref="proCode" label="项目编码" prop="proCode">
            <a-input v-model="form.proCode" :maxLength="30" />
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </div>
  </div>
</template>

<script>
import { projectQuery, projectAdd, tableQuery } from '@/api/projectManage'
export default {
  data() {
    return {
      columns: [
        { title: '项目名称', dataIndex: 'fullName', key: 'fullName' },
        { title: '项目简称', dataIndex: 'briefName', key: 'briefName' },
        { title: '项目编码', dataIndex: 'context', key: 'context', align: 'center' },
        { title: '项目id', dataIndex: 'id', key: 'id', align: 'center' },
        {
          title: '操作',
          key: 'action',
          scopedSlots: { customRender: 'action' },
          align: 'center'
        }
      ],
      data:  [],
      form: {
        id: '',
        name: '',
        proName: '',
        proCode: ''
      },
      visible: false,
      modalTitle: '创建项目',
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      pageSizeOptions: ['5', '10', '20', '30', '40'],
      current: 1,
      pageSize: 10,
      total: 1,
      projectData: [],
      defaultValue: {},
      projectName:[]

    }
  },
  mounted() {
    this.projectGet()
      this.getTable()
  },
  methods: {
    onEdit(text) {
        // console.log(text)
      this.$router.push({ path: '/backManage/projectUserManage' ,query:text})
    },
    showModal() {
      this.visible = true
    },
    handleOk() {
      let data = {
        briefName: '',
        context: '',
        fullName: '',
        id: '',
        remark: '',
        serivceUrl: '',
        sort: 0
      }
      data.id = this.form.id
      data.briefName = this.form.proName
      data.fullName = this.form.name
      data.context=this.form.proCode
      projectAdd(data).then((res) => {
        this.$message.success('创建成功')
        this.getTable()
      })
      this.visible = false
    },
    handleChange(value) {
      // console.log(value)
      this.projectSelect(value.key)
    },
    onShowSizeChange(current, pageSize) {
      // console.log(current, pageSize)
      this.current = 1
      this.pageSize = pageSize
      this.getTable()
    },
    pageChange(current, pageSize) {
      this.current = current
      this.pageSize = pageSize
      this.getTable()
    },
    projectGet() {
      let data = {
        page: 0,
        projectId: '',
        size: 0
      }
      projectQuery(data).then((res) => {
        // console.log(res.data.data)
        let data = res.data.data
        data.forEach((item) => {
          item.key = item.id
          item.label = item.name
        })
        this.projectData = data
        this.defaultValue = { key: this.projectData[0].label }
        this.form.name = this.projectData[0].name
        this.form.id = this.projectData[0].id
        this.form.proName = this.projectData[0].aliasName
        this.form.proCode = this.projectData[0].code
        // console.log(this.projectData);
      })
    },
    projectSelect(id) {
      let data = {
        page: 0,
        projectId: id,
        size: 0
      }
      projectQuery(data).then((res) => {
        // console.log(res.data.data)
        let data = res.data.data[0]
        // data.forEach(item=>{
        //   item.key=item.id
        //   item.label=item.name
        // })
        // this.projectData=data
        // console.log(this.projectData);

        this.form.name = data.name
        this.form.id = data.id
        this.form.proName = data.aliasName
        this.form.proCode = data.code
      })
      // this.defaultValue={key:this.projectData[0].label}
    },
    getTable() {
      let data = {
        page: this.current,
        size: this.pageSize
      }
      tableQuery(data).then((res) => {
       let data =res.data.data
       data.forEach(item=>{
         item.key=item.id
       })
       this.data=data
      })
    }
  }
}
</script>

<style scoped>
.backManage {
  background: #fff;
  padding: 30px 30px;
}
.top {
  margin-bottom: 20px;
}
.atable {
  margin-bottom: 20px;
}
</style>